'use client';
import { Button, Col, Flex, Image, Row } from 'antd';
import { useRouter } from 'next/navigation';

import styles from './index.module.scss';
import { CategoryVodData, HomeVodData, SearchData } from '@/lib/types';

export interface VodListProps {
    dataSource: HomeVodData[] | SearchData[] | CategoryVodData[];
    onItemClick?: (vod: HomeVodData | SearchData | CategoryVodData) => void;
}

const VodList: React.FC<VodListProps> = (props) => {
    const { dataSource = [], onItemClick } = props;
    const router = useRouter();

    const widthMap = {
        xs: `${100 / 3}%`,
        sm: `${100 / 3}%`,
        md: '20%',
        lg: '20%',
        xl: `${100 / 6}%`
    };
    return (
        <>
            {dataSource.length > 0 ? (
                <Row gutter={[16, 16]} className={styles['vod-list']}>
                    {dataSource.map((vod, index) => {
                        return (
                            <Col
                                key={`vod-${vod.vod_id}-${index.toString()}`}
                                xs={{ flex: widthMap.xs }}
                                sm={{ flex: widthMap.sm }}
                                md={{ flex: widthMap.md }}
                                lg={{ flex: widthMap.lg }}
                                xl={{ flex: widthMap.xl }}
                                style={{
                                    cursor: 'pointer',
                                    width: 100
                                }}
                                onClick={() => {
                                    onItemClick && onItemClick(vod);
                                }}
                                className={styles['vod-list-item']}
                            >
                                <div className={styles['vod-list-item-cover']}>
                                    {/* <div className={styles['vod-list-item-cover-new']}>new</div> */}
                                    <div className={styles['vod-list-item-cover-remarks']}>{vod.vod_remarks}</div>
                                    {/* <div className={styles['vod-list-item-cover-douban']}>豆瓣:xx分</div> */}
                                    <Image
                                        rootClassName={styles['vod-list-item-cover-pic']}
                                        src={vod.vod_pic}
                                        referrerPolicy="no-referrer"
                                        alt={vod.vod_name}
                                        preview={false}
                                        style={{
                                            objectFit: 'cover',
                                            height: '100%',
                                            width: '100%'
                                        }}
                                        fallback=""
                                    ></Image>
                                </div>
                                <div className={styles['vod-list-item-info']}>
                                    <div className={styles['vod-list-item-info-title']}>{vod.vod_name}</div>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            ) : (
                <Flex vertical justify="center" align="center" style={{ height: '100%' }}>
                    <span>暂无数据</span>
                    <Button
                        type="primary"
                        ghost
                        style={{ marginTop: 10 }}
                        onClick={() => {
                            router.push('/home');
                        }}
                    >
                        点击返回首页
                    </Button>
                </Flex>
            )}
        </>
    );
};

export default VodList;
